<template>
  <div>
      <el-row>
        <el-col :span="2" :offset="1"><el-button type="primary" plain @click="add">新增入库订单</el-button></el-col>
      </el-row>
      <hr >
      <!-- 自定义组件-->
      <inshopList :inshopdata="inshopdata"></inshopList>
      <!-- 分页-->
      <div class="block" @click="showAll()">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[3]"
            :page-size="3"
            layout="prev, pager, next, jumper"
            :total="maxpage">
          </el-pagination>
      </div>
      <!-- 弹窗-->
      <el-dialog title="用户信息" :visible.sync="dialogFormVisible" :append-to-body="true">
          <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
          <el-form>
              <el-form-item label="入库人姓名" :label-width="formLabelWidth">
                <el-input v-model="inshop.inusname" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="inshop.inidcard" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="inshop.usphone" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="入库商品" :label-width="formLabelWidth">
                <el-select v-model="inshop.shopid" clearable placeholder="请选择" style="width: 100%;">
                     <el-option
                          v-for="item in selectshop"
                          :key="item.shopid"
                          :label="item.shopname"
                          :value="item.shopid">
                        </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="入库数量" :label-width="formLabelWidth">
                <el-input v-model="inshop.innum" auto-complete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <!-- 设置触发更新的方法 -->
              <el-button type="primary" @click="update">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
  var _this;
  //引入子组件
  import inshopList from '../components/inshop/inshopList.vue';
  export default {
      created() {
        _this=this;//记录this--【当前组件对象】
        _this.countpage();
        _this.showAll();
        this.inshop.usid=localStorage.getItem("usid");
      },
     components:{
       inshopList
     },
      methods: {
        showAll(){
        	//进入后台查--->axios
        	_this.$axios.post(
        	   "/inshop/all?page="+this.currentPage,
        	   {}
             //console.log(this.currentPage)
        	)
        	.then(function(param){
        		console.log(param)
        		_this.inshopdata=param.data
        	})
        	.catch(function(err){
        		console.log(err)
        	}),
          //下拉框查询数据

          _this.$axios.post(
             "/shop/all",
             {}
          )
          .then(function(param){
          	console.log(param)
          	_this.selectshop=param.data
          })
          .catch(function(err){
          	console.log(err)
          })
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        countpage(){
        	_this.$axios.post(
        	"/inshop/count",
          {}
        	)
        	.then(function(param){
        		_this.maxpage=param.data
        		console.log(_this.maxpage)
        	})
        	.catch(function(err) {
        		console.log(err)
        	})
        },
        add() {

            //   设置点击按钮之后进行显示对话框
            this.dialogFormVisible = true;
        },
        update() {
          //   this.form.date = reformat(this.form.date);
          //    可以在html上面进行设置日期的格式化
          //   将我们添加的信息提交到总数据里面
          _this.$axios.post(
          	"/inshop/insert",
          	{
              "inusname":this.inshop.inusname,
              "inidcard":this.inshop.inidcard,
              "usphone":this.inshop.usphone,
              "shopname":this.inshop.shopname,
              "innum":this.inshop.innum,
              "uid":this.inshop.usid,
              "shopid":this.inshop.shopid
            }
          )
          .then(function(param) {
          	console.log(param.data)
          })
          .catch(function(err) {
          	console.log(err)
          })
          this.inshop.inusname="";
          this.inshop.inidcard="";
          this.inshop.usphone="";
          this.inshop.shopname="";
          this.inshop.innum="";
          // 取消的时候直接设置对话框不可见即可
          this.dialogFormVisible = false;
        },
        cancel() {
          // 取消的时候直接设置对话框不可见即可
          this.dialogFormVisible = false;
        }
      },
      data() {
        return {
          inshopdata: [],
          selectshop:[],
          currentPage: 1,
          maxpage: 1,
          dialogFormVisible: false,
          formLabelWidth: "100px",

          inshop:{
            inusname: "",
            inidcard: "",
            usphone: "",
            shopname: "",
            innum: "",
            usid:"",
            shopid:""
          }
        };
      }
    }
</script>

<style>

</style>
